<template>
	<view class="addTask">
		<view class="top">
			<!-- <view class="com df" @click="category.show = true">
				<view class="tt">
					地块品种：
				</view>
				<view class="type df">
					<view class="text">
						{{category.label}}
					</view>
					<view class="image">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view> -->
			<view class="com df" :style="{pointerEvents:taskType.label.name == '无' ? 'none':'auto'}"  @click="taskType.show = true">
				<view class="tt">
					任务类型：
				</view>
				<view class="type df">
					<view class="text">
						{{taskType.label.name}}
					</view>
					<view class="image">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="com df" :style="{pointerEvents:form2.type == '无' ? 'none':'auto'}" v-if="taskType.label.whetherVariableInput == 1"  @click="picker.show = true">
				<view class="tt" >选择投入品：</view>
				<view class="type df">
					<view class="text">
						{{form2.type}}
					</view>
					<view class="image">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="com df" v-if="taskType.label.whetherVariableInput == 1">
				<view class="tt">
					投入量：
				</view>
				<view class="type df">
					<view class="text input">
						<u--input border="surround" type="number" v-model="formData.number"></u--input>
					</view>
					<view class="image" style="color: #1D1D1D;">g</view>
				</view>
			</view>
			<view class="com df">
				<view class="tt">
					该任务已完成次数：
				</view>
				<view class="type df" style="color: #1D1D1D;">
					{{complateCount}} 次
				</view>
			</view>
			<view class="upload">
				<image v-if="hasUpload" class="del" src="../../static/del.png" @tap="del"></image>
				<view @click="upload" style="height: 390rpx;">
					<view class="upload-box" v-if="!hasUpload">
						<view>+</view>
						<view>拍摄照片或者图库上传</view>
					</view>
					<view v-else>
						<u-image  width="100%" :src="formData.uploadImage" mode="aspectFit"></u-image>
					</view>
				</view>
			</view>
			<!-- <view class="com df" style="border: 0;">
				<view class="tt">坐标：</view>
				<view class="df">
					<text>{{location[0].lat}},</text>
					<text>{{location[0].lng}}</text>
				</view>
			</view> -->
		</view>
		<view class="btn" @click="dispatch">下发任务</view>
		<!-- <u-picker :show="category.show" :columns="category.option" keyName="variety" :closeOnClickOverlay="true" @cancel="category.show = false" @confirm="confirmCategory"></u-picker> -->
		<u-picker :show="taskType.show" :columns="taskType.option" keyName="name" :closeOnClickOverlay="true" @cancel="taskType.show = false" @confirm="confirmType"></u-picker>
		<u-picker :show="picker.show" :columns="picker.option" keyName="variableInputName" :closeOnClickOverlay="true" @cancel="picker.show = false" @confirm="pickerComfirm"></u-picker>
	</view>
</template>

<script>
	import {
		getAllOperatorAction,
		getInputItem,
		uploadImage,
		opFindTaskDetailById,
		addOperatorTask,
		getTaskFinishCount,
		} from "@/api/api.js"
	export default {
		data() {
			return {
				hasUpload:false,
				form2:{
					type:"",
				},
				complateCount:"",
				formData:{
					variety:'',
					landMsgId:'',
					taskType:'',
					usingType:'',
					number:'',
					uploadImage:''
				},
				category:{
					label:'',
					show:false,
					option:[
						[
							
						]
					]
				},
				taskType:{
					label:'',
					show:false,
					option:[
						[
							
						]
					]
				},
				show: false,
				picker:{
					show:false,
					option:[
						[
							{
								label:'氮',
								id:33
							},
							{
								label:'磷',
								id:34
							},
							{
								label:'钾',
								id:35
							},
						]
					]
				},
				columns: [
					[]
				],
				landMsgId:'',
				landId:'',
				location:[],
			}
		},
		watch: {
			"form.type"(newValue, oldValue) {
				if(newValue.whetherVariableInput == 1){
					
				}
			}
		},
		onLoad(option) {
			this.landId = option.landId
			this.formData.variety = option.variety
			// this.getCategory()
			// this.getlocation()
			this.getAllAction()
			this.getCount()
		},
		methods: {
			async getCount(){
				let query = `plantId=${this.landId}&taskType=${this.taskType.label.name}`
				const res = await getTaskFinishCount(query)
				if(res?.data.code == 200){
					this.complateCount = res.data.data
				}else{
					uni.$u.toast(res.data.msg)
				}
			},
			del(){
				this.formData.uploadImage = ''
				this.hasUpload = false
			},
			async getAllAction(){
				let query = `pageNum=1&pageSize=50`
				const res = await getAllOperatorAction(query)
				if(res?.data.code == 200){
					if(res.data.data.rows.length){
						this.taskType.option[0] = res.data.data.rows
						console.log(this.taskType.option);
						this.taskType.label = this.taskType.option[0][0]
						console.log(this.taskType);
					}else{
						this.taskType.label.name = "无"
					}
				}else{
					un.$u.toast(res.data.msg)
				}
			},
			// async getlocation(){
			// 	let query = `id=&landId=${this.landId}`
			// 	const res = await opFindTaskDetailById(query)
			// 	if(res?.data.code == 200){
			// 		this.location = res.data.data.coords
			// 	}else{
			// 		uni.$u.toast(res.data.msg)
			// 	}
			// },
			async uploadPhoto(data) {
				let that = this
				const res = await uploadImage(data)
				if(res?.data){
					let data = JSON.parse(res.data)
					if(data.status == 'success'){
						that.formData.uploadImage = data.path
						uni.showToast({
							icon:"success",
							title:'上传成功'
						})
					}else{
						uni.showToast({
							icon:"error",
							title:"上传失败"
						})
					}
				}
			},
			upload(){
				let that = this
				uni.chooseMedia({
					count: 1, //默认9
					mediaType:["image"],
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						uni.showLoading({
							title:' ',
							mask:true,
						})
						if(res){
							uni.hideLoading()
							let imageData = res.tempFiles[0].tempFilePath
							that.hasUpload = true
							that.uploadPhoto(imageData)
						}
						
					},
					fail: (err) => {
						uni.showToast({
							icon:"error",
							title:'上传失败'
						})
						that.formData.uploadedImage = ''
						that.hasUpload = false
					}
				})
			},
			// async getCategory(){
			// 	uni.showLoading({
			// 		title:"",
			// 		mask:true,
			// 	})
			// 	let query = `landId=${this.landId}`
			// 	const res = await findVarietyByLandId(query)
			// 	if(res?.data.code == 200){
			// 		this.category.option[0] = res.data.data
			// 		this.category.label = this.category.option[0][0].variety
			// 		this.landMsgId = this.category.option[0][0].landMsgId
			// 		uni.hideLoading()
			// 		this.getTaskType()
			// 	}else{
			// 		uni.showToast({
			// 			icon:"error",
			// 			title:res.data.msg
			// 		})
			// 	}
			// },
			// async getTaskType(){
			// 	let query = `variety=${this.category.label}`
			// 	const res = await findOperatorByVarietyName(query)
			// 	if(res?.data.code == 200){
			// 		this.taskType.option[0] = res.data.data
			// 		console.log(this.taskType.option);
			// 		this.taskType.label = this.taskType.option[0][0]
			// 		this.getCount()
			// 	}else{
			// 		this.taskType.label = {
			// 			farmOperatorName:"无"
			// 		}
			// 		uni.showToast({
			// 			icon:"error",
			// 			title:res.data.msg
			// 		})
			// 	}
			// },
			async getAllInputItem(){
				let query = `type=${this.taskType.label.name}`
				const res = await getInputItem(query)
				console.log(res);
				if(res?.data.code == 200 && res.data.data.length){
					this.picker.option[0] = res.data.data
					this.form2.type = this.picker.option[0][0].variableInputName
				}else{
					uni.$u.toast('获取投入品失败')
					this.form2.type = "无"
				}
			},
			async addTask(){
				let params = {
					variety:this.formData.variety,
					plantId:this.landId,
					taskType:this.formData.taskType,
					taskPicUrl:this.formData.uploadImage,
					variableInput:this.formData.number
					
				}
				console.log(params,'@@@@@@@@@');
				const res = await addOperatorTask(params)
				if(res?.data.code == 200){
					console.log(res);
					uni.showToast({
						icon:"success",
						title:res.data.msg
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:"/pages/operator/farmTaksList?landId="+this.landId
						})
					},1000)
				}else{
					uni.showToast({
						icon:"error",
						title:res.data.msg
					})
				}
			},
			dispatch(){
				console.log('点击了下发任务');
				if(!this.formData.taskType.label && !this.taskType.label.whetherVariableInput == 1){
					this.formData.taskType = this.form2.type
				}
				if(!this.formData.uploadImage){
					uni.$u.toast('请上传图片')
					return
				}
				if(!this.formData.taskType){
					uni.$u.toast('当前品种没有任务配置')
					return
				}
				if(this.formData.number<1 && this.taskType.label.whetherVariableInput == 1){
					uni.showToast({
						icon:'none',
						title:'选择投入量太少了',
					})
					return
				}
				this.addTask()
			},
			confirmType(i) {
				this.taskType.label = i.value[0]
				this.formData.taskType = this.taskType.label.name
				this.getCount()
				if(i.value[0].whetherVariableInput){
					this.getAllInputItem()
				}
				this.taskType.show = false
			},
			pickerComfirm(i){
				this.form2.type = i.value[0].variableInputName
				this.formData.usingType = this.form2.type
				this.picker.show = false
			},
			confirmCategory(i){
				console.log(i);
				this.category.label = i.value[0].variety
				this.formData.variety = this.category.label
				this.landMsgId = i.value[0].landMsgId
				this.getTaskType(this.category.label)
				this.category.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upload{
		width: 100%;
		padding: 20rpx 0;
		position: relative;
		overflow: hidden;
		.del{
			z-index: 2;
			top: 25rpx;
			right: 1rpx;
			position: absolute;
			width: 60rpx;
			height: 60rpx;
		}
		.upload-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 40rpx;
			height: 345rpx;
			background-color: #f7f7f7;
			border-radius: 12rpx;
			view:nth-child(1){
				font-size: 68rpx;
			}
			view:nth-child(2){
				font-size: 33rpx;
			}
		}
	}
	.addTask {
		.df {
			display: flex;
		}

		.top {
			width: 690rpx;
			// height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);

			.com {
				justify-content: space-between;
				font-size: 30rpx;
				height: 30rpx;
				padding: 30rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.type {
					color: #17CC77;

					.text {
						margin-right: 18rpx;
					}

					.input {
						margin-top: -20rpx;
						width: 180rpx;
					}

					.image {
						width: 12rpx;
						height: 22rpx;

						image {
							margin-top: 10rpx;
							width: 12rpx;
							height: 22rpx;
						}
					}
				}
			}
		}

		.btn {
			position: absolute;
			bottom: 91rpx;
			left: 50%;
			margin-left: -140rpx;
			width: 280rpx;
			height: 84rpx;
			background: #1BC46D;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
			border-radius: 12rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>